<template>
  <div class="base-info">
    <div class="left">
      <leftList :list="list" @handle-item="handleItem" />
    </div>
    <div class="right">
      <triggerRuleInfo v-if="listValue == 'triggerRule'" />
      <notificationRulesInfo v-if="listValue == 'notificationRule'" />
    </div>
  </div>
</template>
<script setup lang="ts">
import leftList from './components/leftList.vue';
import triggerRuleInfo from './components/triggerRuleInfo.vue';
import notificationRulesInfo from './components/notificationRulesInfo.vue';
const list = [
  {
    icon: 'listicon',
    value: 'triggerRule',
    title: '触发规则',
  },
  {
    icon: 'listicon',
    value: 'notificationRule',
    title: '通知规则',
  },
];
const listValue = ref('triggerRule');
const handleItem = (item: any) => {
  listValue.value = item.value;
};
</script>

<style scoped lang="less">
.base-info {
  display: flex;
  height: 100%;
  width: calc(100% + 20px);

  .left {
    width: 240px;
    height: 100%;
  }

  .right {
    flex: 1;
    height: 100%;
    padding: 20px 20px 20px 18px;
    overflow: auto;
  }
}
</style>
